/*
  定义flex盒子
*/
@mixin flex-box($justify:null, $align:null, $align1: null, $direction: null, $warp: null) {
  display: flex;
  @if $justify!=null {
    justify-content: $justify;
  }
  @if $align!=null {
    align-items: $align;
  }
  @if $align1!=null {
    align-content: $align1; //定义垂直方向多跟轴线对齐方向
  }
  @if $direction!=null {
    flex-direction: $direction;
  }
  @if $warp!=null {
    flex-wrap: $warp;
  }
}
/* flex绝对居中 */
@mixin flexCenter {
	display: flex;
	justify-content: center;
	align-items: center;
}
/*定义flexbox子项*/
@mixin flex-item($flex: 0 1 auto) {
  // flex-wrap: $grow;---定义项目放大属性，默认0 即如果存在剩余空间，也不放大
  // flex-shrink: $shrink;---定义项目缩小比例属性，默认1 即如果空间不足，该项目将缩小
  // flex-basis: $basis;---属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小;它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
  // flex: grow shrink basis;
  flex: $flex;
}

/**
  正方形
*/
@mixin square-inline($width: 30px) {
  display: block;
  width: $width;
  height: $width;
}

/*
  圆形
*/
@mixin square($width: 30px,) {
  width: $width;
  height: $width;
  border-radius: 50%;
}

/*
* 宽高行高一致
*/
@mixin lightHeight($height) {
  height: $height;
  line-height: $height;
}

// 选中状态
@mixin activeStatus {
  color: #20c997;
  background: rgba(80, 168, 180, 0.1);
}

//超出隐藏
@mixin multilineEllipsis($n) {
  display: -webkit-box; /* 创建弹性伸缩盒子 */
  -webkit-box-orient: vertical; /* 设置盒子方向为垂直 */
  -webkit-line-clamp: $n; /* 限制显示的行数 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 添加省略号 */
}